<template>
  <div class="box">
    <table>
      <thead>
        <tr>
          <!-- 全选 -->
          <th width="120">
            <div>
              <el-checkbox v-model="flag" @change="changed()"></el-checkbox>
              <span>全选</span>
            </div>
          </th>
          <th width="400">商品信息</th>
          <th width="220">单价</th>
          <th width="180">数量</th>
          <th width="180">小计</th>
          <th width="140">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.skuId">
          <!-- 多选框 -->
          <td>
            <div>
              <el-checkbox
                v-model="item.selected"
                @change="selected(item)"
              ></el-checkbox>
              <!-- <input type="checkbox" style="width:20px;height:20px;border:1px solid red;"> -->
              <!-- <i class="iconfont icon-duoxuankuang" @click="iconClick()"></i> -->
            </div>
          </td>
          <!-- 商品信息 -->
          <td>
            <div class="goods">
              <img :src="item.picture" alt="" />
              <div class="rightBox">
                <p class="p-name">{{ item.name }}</p>
                <div class="attrs">
                  <span class="leixing">{{ item.name }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </div>
            </div>
          </td>
          <!-- 单价 -->
          <td>
            <p>{{ item.price }}</p>
          </td>
          <!-- 数量 -->
          <td>
            <div class="numBox">
              <div class="numberBox">
                <div class="jian" @click="jian(item)">-</div>
                <div class="shuliang">{{ item.count }}</div>
                <div class="jia" @click="jia(item)">+</div>
              </div>
            </div>
          </td>
          <!-- 小计 -->
          <td>
            <p class="moneyNum">
              ￥<span>{{ (item.count * item.price).toFixed(2) }}</span>
            </p>
          </td>
          <!-- 操作 -->
          <td>
            <div class="caozuoBtn">
              <p>移入收藏夹</p>
              <p class="greenText" @click="deleteClick(item)">删除</p>
              <p>找相似</p>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="actionBox">
      <div class="actionLeft">
        <div>
          <el-checkbox v-model="flag" @change="changed()"></el-checkbox>
          <span>全选</span>
        </div>
        <p>删除商品</p>
        <p>移入收藏夹</p>
        <p>清空失效商品</p>
      </div>
      <div class="actionRight">
        <div>
          <p>
            共<span> {{getNum}} </span>件商品，已选择<span> {{checkedNum}} </span>件， 商品合计：
            <span class="heji">
              ￥<span>{{ heji1 }}</span>
            </span>
          </p>
        </div>
        <button @click="jiesuan()">下单结算</button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  jumpShoop,
  xiu,
  deleteData,
  qvanxvanBtn,
} from "@/api/user";
export default {
  name: "ShopPing",
  data() {
    return {
      list: [], //购物车数据
      flag: null, //全选按钮状态
      sum:0,//所有商品数量
      // checkedNum:0,//选中的商品数量
    };
  },
  computed: {
    heji1() {
      let num = 0;
      let aa = this.list.filter((item) => item.selected);
      // console.log(aa);
      aa.forEach((item) => {
        // console.log(num);
        return (num += item.count * 1 * (item.price * 1));
      });
      return num.toFixed(2) * 1;
    },
    checkedNum(){
      let num = 0;
      let aa = this.list.filter((item) => item.selected);
      aa.forEach((item) => {
        return num += item.count * 1
      })
      return num
    },
    getNum(){
      let num = 0;
      this.list.forEach((item) => {
        return num += item.count * 1
      })
      return num
    }
  },
  methods: {
    jiesuan(){
      this.$router.push({
        name:"SiteView",
      })
    },
    //购物车全选
    changed() {
      // console.log(this.flag);
      let arr = [];
      let li = this.list.filter((item) => item.selected);
      // console.log(li);
      li.forEach((item) => {
        // console.log(item.selected);
        arr.push(item.skuId)
      });
      this.list.forEach((item) => {
        item.selected = this.flag
      });
      // console.log(arr);
      qvanxvanBtn(arr,this.flag)
    },
    //数量加
    jia(item) {
      item.count++;
      // console.log(item.count++);
      // // this.$store.state.shoop.count++;
      // // count = this.$store.state.shoop.count;
      // // console.log(value);
      // value[0]++;
      // this.$store.commit("shoop/jia", item);
      // 修改购物车
      xiu(item.skuId, item.count).then();
      
    },
    //数量减
    jian(item) {
      item.count--;
      if (item.count < 0) {
        item.count = 0;
      }
      // console.log(item.count--);
      xiu(item.skuId, item.count).then();
    },
    //点击多选框发送请求，修改当前状态
    selected(item) {
      // console.log(item);
      xiu(item.skuId, item.count, item.selected);
      this.getSelect();
    },
    getSelect(){
      let aa = this.list.filter(item => item.selected);
      // console.log(this.list.length,aa.length);
      if(this.list.length == aa.length){
        this.flag = true
      }else{
        this.flag = false
      }
    },
    //点击删除数据
    deleteClick(item) {
      deleteData([item.skuId]).then((res) => {
        console.log(res);
        jumpShoop().then((res) => {
          let list = res.data.result.filter((item) => item.isEffective == true);
          this.list = list;
          console.log(this.list);
        });
      });
    },   
  },
  created() {
    //请求购物车数据
    jumpShoop().then((res) => {
      let list = res.data.result.filter((item) => item.isEffective == true);
      this.list = list;
      console.log(this.list);
      this.getSelect();
    });
  },
};
</script>

<style lang="scss" scoped>
@import url("../../iconfont/iconfont.css");
.box {
  width: 1240px;
  margin: 0 auto;
}
.caozuo {
  width: 100%;
  text-align: center;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
  line-height: 24px;
  background: white;
  border-bottom: 1px solid #f5f5f5;
}
.icon-duoxuankuang11 {
  color: #27bb9a;
}
th {
  font-weight: normal;
  padding: 20px;
}
.numBox {
  width: 100%;
  display: flex;
  justify-content: center;
}
tr {
  border-bottom: 1px solid #f5f5f5;
}
.numberBox {
  width: 120px;
  height: 30px;
  border: 1px solid #e4e4e4;
  display: flex;
  .jia,
  .jian {
    width: 30px;
    line-height: 30px;
    background: #f8f8f8;
  }
  .shuliang {
    width: 60px;
    padding: 0 5px;
    text-align: center;
    line-height: 30px;
    color: #666;
  }
  a {
    width: 29px;
    line-height: 28px;
    text-align: center;
    background: #f8f8f8;
    font-size: 16px;
    color: #666;
  }
}
.moneyNum {
  color: #cf4444;
  font-size: 16px;
}
.greenText {
  color: #27ba9b;
}
td {
  text-align: center;
  padding: 10px;
}
.caozuoBtn {
  text-align: center;
  font-size: 12px;
}
.goods {
  display: flex;
  align-items: center;
  .rightBox {
    margin-left: 10px;
  }
  img {
    width: 100px;
    height: 100px;
  }
  .p-name {
    white-space: nowrap;
  }
  .attrs {
    // max-width: 250px;
    display: flex;
    border: 1px solid rgb(226, 223, 223);
    padding: 0 5px;
    border-radius: 3px;
    margin-top: 10px;
  }
  .leixing {
    max-width: 250px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    color: #999;
  }
}
.actionBox {
  width: 1240px;
  height: 80px;
  background: white;
  margin-top: 20px;
  display: flex;
  padding: 0 30px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  .actionLeft {
    display: flex;
    p {
      margin-left: 20px;
    }
  }
  .actionRight {
    display: flex;
    align-items: center;
    button {
      width: 180px;
      height: 50px;
      background: #27ba9b;
      color: white;
      border-radius: 3px;
      margin-left: 20px;
      border: none;
    }
    .heji {
      color: #cf4444;
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>